<template>
	<public-view navType="order" navTitle="申请售后" topBgShow="4" :navRight="false" navColor="#ffffff">
		<view class="content flex a-i-c f-d-c">
			<view class="goods-item-view flex f-d-c">
				<view class="top color-999 f-s-30 flex a-i-c" @click="goTo({url:'/pages/store/index?id='+item.merchant.id})">
					<image class="icon" src="@/static/images/my/gift-store999.svg" mode=""></image>
					{{item.merchant?.name}}
				</view>
				<block v-for="(itm, index) in item.goods_list" :key="index">
					<view class="goods-info flex a-i-c" @click="goTo({url:'/pages/shop/goodsInfo?id='+itm.goods_id})">
						<image class="image" :src="itm.goods_sku_product_image" mode=""></image>
						<view class="info-view">
							<view class="title f-s-26 color-333 f-w-b l-h-36">
								{{itm.goods_name||""}}
							</view>
							<view class="f-s-24" style="color: #bebebe;">
								规格{{itm.sku_text||""}}/数量{{itm.num||""}}
							</view>
						</view>
						<view class="money f-s-32 color-F32E2E f-w-b">
							<text class="f-s-24">￥</text>{{item.amount||0}}
						</view>
					</view>
				</block>
			</view>
			<view class="backmoney-view flex a-i-c j-c-b">
				<view class="f-s-26 color-333 f-w-b">
					退款金额
				</view>
				<view class="color-EE8300 f-s-32 f-w-b">
					<text class="f-s-22 f-w-4">￥</text>{{item.allow_refund_amount||0}}
				</view>
			</view>
			<!-- <view class="backmoney-view flex a-i-c j-c-b">
				<view class="f-s-26 color-333 f-w-b flex a-i-c">
					<view class="" style="margin-right: 20rpx;">
						取消原因
					</view>
					<input class="f-w-4" type="text" placeholder="请选择取消原因" />
				</view>
				<image class="next-ic" src="@/static/images/form-next.svg" mode=""></image>
			</view> -->
			<view class="order-info-box">
				<picker :range="goods_back" @change="changeBackBecause">
					<view class="w-100 flex a-i-c j-c-b item">
						<view class="f-s-26 color-333 f-w-b flex a-i-c">
							<view class="" style="margin-right: 20rpx;">
								退款原因
							</view>
						</view>
						<view class="flex a-i-c j-c-b f-s-24" style="width: 500rpx;">
							<input class="f-w-4" :disabled="true" :value="back_text" type="text" placeholder="请选择退款原因" />
							<image class="next-ic" src="@/static/images/form-next.svg" mode=""></image>
						</view>
					</view>
				</picker>
				<view class="w-100 flex j-c-b item">
					<view class="f-s-26 color-333 f-w-b flex">
						<view class="l-h-50">
							退款描述
						</view>
					</view>
					<textarea class="backmoney-beacuse f-s-24" v-model="desc" type="text" placeholder="请输入退款描述"></textarea>
				</view>
				<view class="w-100 flex j-c-b item">
					<view class="f-s-26 color-333 f-w-b flex">
						<view class="l-h-50">
							上传图片
						</view>
					</view>
					<view class="upload-view flex f-w-w j-c-b">
						<block v-for="(item, index) in images" :key="index">
							<upload-box iconType="2" type="2" :src='item' :current='index' @del="delImage" @success="uploadSuccess"></upload-box>
						</block>
						<upload-box iconType="2" type="2" current="" src="" @success="uploadSuccess"></upload-box>
					</view>
				</view>
			</view>
			<view class="save-address-btn all-center color-fff f-s-30" @click="orderBackMoney">
				提交申请
			</view>
		</view>
	</public-view>
</template>

<script>
	import uploadBox from "@/components/myComponents/uploadBox.vue"
	import {goTo} from "@/nav.js"
	export default {
		components:{
			"upload-box":uploadBox
		},
		data() {
			return {
				order_id:"",
				item:{},
				goods_back:[],
				back_text:"",
				images:[],
				desc:""
			};
		},
		onLoad(o) {
			this.order_id = o.id
			this.getOrderInfo()
		},
		onShow() {
			this.goods_back = this.$store.state.public_config.goods[0].value
		},
		methods:{
			goTo,
			orderBackMoney(){
				let that = this
				if(that.back_text.length<=0){
					uni.showToast({
						title:"请选择退款原因",
						icon:"none"
					})
					return
				}
				that.util.postRequest({
					url:"v1/order/refund",
					data:{
						order_id:that.order_id,
						reason:that.back_text,
						desc:that.desc,
						images:that.images
					}
				}).then(res=>{
					uni.showToast({
						title:"申请成功",
					})
					let timeout=setTimeout(()=>{
						uni.navigateBack()
					},2000)
				})
			},
			uploadSuccess(e){
				console.log(e)
				let {index,url} = e
				if(index === ''){
					this.images.push(url)
				}else{
					this.images.splice(index,1,url)
				}
			},
			changeBackBecause(e){
				let index = e.detail.value
				this.back_text = this.goods_back[index]
			},
			delImage(e){
				this.images.splice(e,1)
			},
			getOrderInfo(){
				let that = this
				that.util.postRequest({
					url:"v1/order/info",
					data:{
						order_id:that.order_id
					}
				}).then(res=>{
					console.log(res)
					that.item = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.save-address-btn{
		width: 702upx;
		height: 96upx;
		border-radius: 128upx;
		background: #EE8300;
		margin-top: 48upx;
	}
	.next-ic{
		width: 20upx;
		height: 20upx;
	}
	.backmoney-beacuse{
		width: 500upx;
		height: 122upx;
		background: #F7F7F7;
		border-radius: 8upx;
		padding: 14upx;
		box-sizing: border-box;
	}
	.backmoney-view{
		width: 100%;
		background: #FFFFFF;
		padding: 16upx 30upx;
		border-radius: 20upx;
		margin-bottom: 16upx;
		height: 100upx;
	}
	.edit-btn-list{
		width: 100%;
		margin-top: 40upx;
		.item{
			width: 158upx;
			height: 58upx;
			border-radius: 30upx;
			font-size: 22upx;
		}
		.btn3{
			border: 2upx solid #2567F3;
			color: #2567F3;
		}
		.btn2{
			border: 2upx solid #EE8300;
			color: #EE8300;
		}
		.btn1{
			border: 2upx solid #CCCCCC;
			color: #666666;
			margin-right: 30upx;
		}
	}
	.order-info-box{
		width: 100%;
		background: #FFFFFF;
		padding: 50upx 28upx;
		border-radius: 20upx;
		.item{
			margin-bottom: 28upx;
			.upload-view{
				width: 500upx;
				.item{
					
				}
				&::after{
					content: "";
					width: 160upx;
					height: 16upx;
				}
			}
		}
		.back-money{
			width: 100%;
			padding-top: 32upx;
			border-top: 2upx solid #f2f2f2;
		}
		.title{
			margin-bottom: 16upx;
		}
	}
	.goods-item-view{
		width: 100%;
		background: #FFFFFF;
		padding: 22upx 28upx 46upx 28upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
		.goods-info{
			.info-view{
				width: 354upx;
				.title{
					margin-bottom: 6upx;
				}
			}
			.image{
				width: 116upx;
				height: 116upx;
				margin-right: 26upx;
				border-radius: 8upx;
			}
		}
		.top{
			width: 100%;
			margin-bottom: 16upx;
			.icon{
				width: 40upx;
				height: 40upx;
				margin-right: 16upx;
			}
		}
	}
	.content{
		width: 100%;
		padding: 32upx 30upx;
	}
</style>
